<script setup lang="ts">
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElSwitch, ElMessage, ElAutocomplete } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { ref, reactive } from 'vue'
import { GetUserListParamsType, GetUserListType } from '@/api/login/types'
import { useRoute } from 'vue-router'
import { useTagsView } from '@/hooks/web/useTagsView'

import { queryRoleApi, addRoleApi, queryRoleDetailApi, updateRoleApi } from '@/api/role'
import { QueryRoleParamsType, QueryRoleType, AddRoleParamsType } from '@/api/role/types'

const { t } = useI18n()

const { query } = useRoute()

const { setTitle } = useTagsView()

const loading = ref(false)

const queryRoleTypeData = ref<QueryRoleType>()

const emailLoading = ref(false)

const form = ref<AddRoleParamsType>({})

const title = ref('')

if (query.id) {
  title.value = '修改路由'
} else {
  title.value = '添加路由'
}

setTitle(title.value)

const initFormValue = () => {
  form.value = {
    path: '',
    component: '',
    redirect: '',
    name: '',
    isLogin: true,
    meta: {
      hidden: false,
      alwaysShow: false,
      title: '',
      icon: '',
      noCache: false,
      breadcrumb: true,
      affix: false,
      activeMenu: false,
      noTagsView: false,
      canTo: false
    }
  }
}

initFormValue()

const requestQueryRoleApi = async (excludeIds?: Array<number>, name?: string) => {
  const params: QueryRoleParamsType = {
    pageNum: 0,
    excludeIds: excludeIds,
    name: name
  }
  const res = await queryRoleApi(params)
  if (res.code == 1) {
    queryRoleTypeData.value = res.data
  }
  emailLoading.value = false
}

const requestAddRoleApi = async () => {
  const params: AddRoleParamsType = form.value
  loading.value = true
  const res = await addRoleApi(params)
  loading.value = false

  if (res.code == 1) {
    initFormValue()
    ElMessage({
      message: '添加成功！',
      type: 'success'
    })
  }
}

const requestQueryRoleDetailApi = async (id: number) => {
  const params: QueryRoleParamsType = {
    id: id
  }
  loading.value = true
  const res = await queryRoleDetailApi(params)
  loading.value = false
  if (res.code == 1) {
    form.value = res.data
  }
}

const requestUpdateRoleApi = async () => {
  const params: AddRoleParamsType = form.value
  loading.value = true
  const res = await updateRoleApi(params)
  loading.value = false
  if (res.code == 1) {
    ElMessage({
      type: 'success',
      message: '修改成功！'
    })
  }
}

if (!!query.id) {
  requestQueryRoleDetailApi(parseInt(query.id.toString()))
} else {
}

requestQueryRoleApi(undefined, undefined)

const remoteMethod = (query: string) => {
  if (query) {
    emailLoading.value = true
    requestQueryRoleApi(undefined, query)
  }
}

const onAdd = () => {
  requestAddRoleApi()
}

const onModify = () => {
  requestUpdateRoleApi()
}

const onRecover = () => {
  form.value.isDel = false
  requestUpdateRoleApi()
}
</script>

<template>
  <ContentWrap :title="title" :loading="loading">
    <el-form :model="form" label-width="auto" style="width: 100%">
      <el-form-item label="路由路径">
        <el-input v-model="form.path" placeholder="请输入路由路径，如果是第一层菜单，前面要带/,比如：/dashboard；否则不要带/" />
      </el-form-item>
      <el-form-item label="组件路径">
        <el-input v-model="form.component" placeholder="请输入组件路径，如果没有，请填写#符号" />
      </el-form-item>
      <el-form-item label="重定向路径">
        <el-input v-model="form.redirect" placeholder="请输入重定向路径" />
      </el-form-item>
      <el-form-item label="路由名字">
        <el-input v-model="form.name" placeholder="请输入路由名字" />
      </el-form-item>
      <el-form-item label="隐藏路由">
        <el-switch v-model="form.meta!.hidden" active-text="当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)" />
      </el-form-item>
      <el-form-item label="总是显示">
        <el-switch
          v-model="form.meta!.alwaysShow"
          active-text="当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
                              只有一个时，会将那个子路由当做根路由显示在侧边栏，
                              若你想不管路由下面的 children 声明的个数都显示你的根路由，
                              你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，
                              一直显示根路由(默认 false)"
        />
      </el-form-item>
      <el-form-item label="菜单名字">
        <el-input v-model="form.meta!.title" placeholder="请输入菜单名字" />
      </el-form-item>
      <el-form-item label="菜单图标">
        <el-input v-model="form.meta!.icon" placeholder="请输入菜单图标" />
      </el-form-item>
      <el-form-item label="缓存">
        <el-switch v-model="form.meta!.noCache" active-text="如果设置为true，则不会被 <keep-alive> 缓存(默认 false)" />
      </el-form-item>
      <el-form-item label="面包屑显示">
        <el-switch v-model="form.meta!.breadcrumb" active-text="如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)" />
      </el-form-item>
      <el-form-item label="固定Tag">
        <el-switch v-model="form.meta!.affix" active-text="如果设置为true，则会一直固定在tag项中(默认 false)" />
      </el-form-item>
      <el-form-item label="高亮路径">
        <el-switch v-model="form.meta!.activeMenu" active-text="显示高亮的路由路径" />
      </el-form-item>
      <el-form-item label="Tag组件">
        <el-switch v-model="form.meta!.noTagsView" active-text="如果设置为true，则不会出现在tag中(默认 false)" />
      </el-form-item>
      <el-form-item label="跳转">
        <el-switch v-model="form.meta!.canTo" active-text="设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)" />
      </el-form-item>
      <el-form-item label="登录">
        <el-switch v-model="form.isLogin" active-text="设置true，则需要登录才能使用，否则就需要登录使用" />
      </el-form-item>
      <el-form-item label="父路由名字">
        <el-select v-model="form.parentId" filterable remote reserve-keyword placeholder="请输入父路由名字" remote-show-suffix :remote-method="remoteMethod" :loading="emailLoading" style="width: 240px">
          <el-option v-for="item in queryRoleTypeData?.list" :key="item.id" :label="item.name" :value="item.id!" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAdd" v-if="!!query.id == false">添加</el-button>
        <el-button type="primary" @click="onModify" v-if="!!query.id == true">修改</el-button>
        <el-button type="warning" @click="onRecover" v-if="form.isDel">恢复正常</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>
